import api from "../../axios/api";
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { List, Checkbox, Card } from "antd-mobile";
import { changeStatus } from "../../store/userSlice";
import { ActionBar } from "react-vant";
import { Tabs } from "antd-mobile";
import "./List.css";
const Index = () => {
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const initialState = useSelector((state) => state.userSlice);
  console.log(initialState);
  const [list, setlist] = useState([]);
  const { id } = useParams();
  console.log(id);
  const getData = async () => {
    const res = await api.get("/api/trip/train/detail", { params: { id } });
    const { code, data } = res.data;
    if (code == 200) {
      console.log(res.data);
      setlist(data);
    }
  };
  useEffect(() => {
    getData();
  }, []);
  const [aa,setaa]=useState('qq')
  return (
    <div>
      <div className="box">
        <p>
          <span>21:03</span>
          <span>{list.startTime}</span>
          <span>21:03</span>
        </p>
        <p>
          <span>{list.start}</span>
          <span
            onClick={() => {
              setVisible1(true);
            }}
          >
            D2444，时刻表
          </span>
          <span>{list.end}</span>
        </p>
      </div>
      <div>
        <h3 onClick={() => navigate("/user")}>选择乘车人</h3>
        <div>
          {initialState.map((item, index) => {
            if (item.status) {
              return (
                <List.Item
                  title={item.phone}
                  description={item.cardid}
                  extra={
                    <Checkbox
                      checked={item.status}
                      onChange={(val) => {
                        dispatch(changeStatus({ index, checked: val }));
                      }}
                    />
                  }
                  key={index}
                >
                  {item.name}
                </List.Item>
              );
            } else {
              return null ;
            }
          })}
        </div>
      </div>
      <Tabs>
        <Tabs.Tab title="第一程" key="fruits">
          <Card className="xz" >
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>F</span>
          </Card>
        </Tabs.Tab>
        <Tabs.Tab title="第二程" key="vegetables">
          <Card className="xz">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>F</span>
          </Card>
        </Tabs.Tab>
      </Tabs>

      <div>
        <ActionBar>
          <ActionBar.Button
            type="danger"
            text="立即购买"
            onClick={() => navigate(`/orderlist/${id}`)}
          />
        </ActionBar>
      </div>
    </div>
  );
};

export default Index;
